<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="col-md-12 profile-dashboard">
<div class="row">
<div class="col-md-7 dashboard-form calender">
<form class="form-horizontal">
<div class="bg-white pinside40 mb30">
<!-- Form Name -->
<div class="add_listing_info">
<h3>Basic Informations</h3>
<div class="form-group">
<div class="col-md-4">
<div class="photo-upload"><img src="images/profile-dashbaord.png" alt=""></div>
</div>
<div class="col-md-8 upload-file">
<div class="form-group">
<input type="file">
</div>
</div>
</div>
</div>
<!-- Text input-->
<div class="add_listing_info">
<h3>Personal Information</h3>
<div class="form-group">
<label class="col-md-4 control-label" for="name">First Name<span class="required">*</span></label>
<div class="col-md-8">
<input id="name" name="name" type="text" placeholder="Vendor Name" class="form-control input-md" required="">
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="name">Last Website </label>
<div class="col-md-8">
<input id="name" name="name" type="text" placeholder="Vendor Website" class="form-control input-md" required="">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="name">Email<span class="required">*</span></label>
<div class="col-md-8">
<input id="name" name="name" type="text" placeholder="Email" class="form-control input-md" required="">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="name">Phone<span class="required">*</span></label>
<div class="col-md-8">
<input id="name" name="name" type="text" placeholder="Phone" class="form-control input-md" required="">
</div>
</div>
<h2 class="form-title">Socail Media Profile</h2>
<div class="form-group">
<label class="col-md-4 control-label" for="facebook">Facebook URL</label>
<div class="col-md-8">
<input id="facebook" name="facebook" type="text" placeholder="Facebook URl" class="form-control input-md" required="">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="twitter">Twitter URL</label>
<div class="col-md-8">
<input id="twitter" name="twitter" type="text" placeholder="Twitter Url" class="form-control input-md" required="">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="linkedin">Linkedin URL</label>
<div class="col-md-8">
<input id="linkedin" name="linkedin" type="text" placeholder="Linkedin Url" class="form-control input-md" required="">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="pinterest">Pinterest URL</label>
<div class="col-md-8">
<input id="pinterest" name="pinterest" type="text" placeholder="Pinterest Url" class="form-control input-md" required="">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="instagram">instagram URL</label>
<div class="col-md-8">
<input id="instagram" name="instagram" type="text" placeholder="Instagram Url" class="form-control input-md" required="">
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="submit"></label>
<div class="col-md-4">
<button id="submit" name="submit" class="btn btn-primary">Update Profile</button>
</div>
</div>
</div>
</form>
</div>
<div class="col-md-5 dashboard-form">
<form class="form-horizontal">
<div class="bg-white pinside30">
<!-- Form Name -->
<h2 class="form-title">Change Password</h2>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="oldpassword">Old Password</label>
<div class="col-md-8">
<input id="oldpassword" name="oldpassword" type="text" placeholder="Old Password" class="form-control input-md" required="">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="newpassword">New Password</label>
<div class="col-md-8">
<input id="newpassword" name="newpassword" type="text" placeholder="New Password" class="form-control input-md" required="">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="ConfirmPassword">Confirm Password</label>
<div class="col-md-8">
<input id="ConfirmPassword" name="ConfirmPassword" type="text" placeholder="Confirm Password" class="form-control input-md" required="">
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="submit"></label>
<div class="col-md-4">
<button id="submit" name="submit" class="btn btn-primary btn-lg">Save Password</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
.bg-white {
background-color: #fff;
-webkit-box-shadow: 0px 0px 5px 0px rgba(221, 221, 221, 1);
-moz-box-shadow: 0px 0px 5px 0px rgba(221, 221, 221, 1);
box-shadow: 0px 0px 5px 0px rgba(221, 221, 221, 1);
}
.pinside40 {
padding: 40px;
}
.pinside30 {
padding: 30px;
}
.mb30 {
margin-bottom: 30px;
}
form {
display: block;
margin-top: 0em;
}
.form-title {
border-bottom: 1px solid #e8e6df;
padding-bottom: 19px;
margin-bottom: 30px;
}
h2 {
font-size: 22px;
}
input.form-control {
height: 48px;
background-color: #fdfdfb;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
border: 1px solid #e9e6e0;
-webkit-box-shadow: inset 0 0px 0px rgba(0, 0, 0, .075);
box-shadow: inset 0 0px 0px rgba(0, 0, 0, .075);
font-family: 'Montserrat', sans-serif;
}
button.btn-primary {
height: 48px;
}
.btn-primary {
background-color: #f48f00;
color: #fff;
}
.btn {
padding: 10px 20px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
border: transparent;
border-radius: 2px;
text-transform: uppercase;
font-weight: 800;
font-family: 'Montserrat', sans-serif;
letter-spacing: 1px;
}
.bg-white {
background-color: #fff;
-webkit-box-shadow: 0px 0px 5px 0px rgba(221, 221, 221, 1);
-moz-box-shadow: 0px 0px 5px 0px rgba(221, 221, 221, 1);
box-shadow: 0px 0px 5px 0px rgba(221, 221, 221, 1);
}
.pinside40 {
padding: 40px;
}
.pinside30 {
padding: 30px;
}
.mb30 {
margin-bottom: 30px;
}
form {
display: block;
margin-top: 0em;
}
.form-title {
border-bottom: 1px solid #e8e6df;
padding-bottom: 19px;
margin-bottom: 30px;
}
h2 {
font-size: 22px;
}
input.form-control {
height: 48px;
background-color: #fdfdfb;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
border: 1px solid #e9e6e0;
-webkit-box-shadow: inset 0 0px 0px rgba(0, 0, 0, .075);
box-shadow: inset 0 0px 0px rgba(0, 0, 0, .075);
font-family: 'Montserrat', sans-serif;
}
button.btn-primary {
height: 48px;
}
.btn-primary {
background-color: #f48f00;
color: #fff;
}
.btn {
padding: 10px 20px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
border: transparent;
border-radius: 2px;
text-transform: uppercase;
font-weight: 800;
font-family: 'Montserrat', sans-serif;
letter-spacing: 1px;
}
